<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单验证</title>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<style type="text/css">
/* css compatible */
* {padding:0px; margin:0px;}
ul,li {line-height:16px;}
table {border-collapse:collapse;}
/* form */
.form table td  {padding:2px 0px;}
.form table .name {width:80px; vertical-align:top; line-height:22px;}
.form table td span {width:100%; height:20px; line-height:20px; font-size:12px; display:block;}
.msg_warning {color:#9d9d9d; background-image:url(../image/icon/msg_warning.gif); background-repeat:no-repeat;}
.msg_error {color:#d30f00; background-image:url(../image/icon/msg_error.gif); background-repeat:no-repeat;}
.msg_success {color:#279e1f; background-image:url(../image/icon/msg_success.gif); background-repeat:no-repeat;}
.msg_loading {color:#F60; background-image:url(../image/icon/msg_loading.gif); background-repeat:no-repeat;}
.text {width:180px; height:22px; line-height:22px; border:1px solid #c0c0c0;}
.text_warning {width:178px; height:20px; line-height:20px; border:2px solid #f90;}
.text_error {width:178px; height:20px; line-height:20px; border:2px solid #c30}
.text_success {width:178px; height:20px; line-height:20px; border:2px solid #396;}
.text_loading {width:178px; height:20px; line-height:20px; border:2px solid #fc3;}
.password_amount {background-image:url(../image/pic/password_amount.gif); background-position:left center; background-repeat:no-repeat;}
</style>
</head>

<body>
<form class="form" name="form" id="form" onsubmit="return check(this)" action="" method="post">
    <table>
   	  <tr>
        <td class="name">用户名：</td>
        <td class="val"><input name="username" id="username" class="text" type="text" test="(none:username),(userName:username)" onFocus="warning(this)" onBlur="detect(this,'ok')" /><span id="username_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name">邮箱：</td>
        <td class="val"><input name="email" id="email" class="text" type="text" test="(none:email),(email)" onFocus="warning(this)" onBlur="detect(this,'ok')" /><span id="email_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name">密码：</td>
        <td class="val"><input name="password" id="password" class="text" type="password"  test="(none:password),(password)" onFocus="warning(this,'<span class=\'password_amount\'>&nbsp;</span>')" onBlur="detect(this,'ok')" /><span id="password_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name">确认密码：</td>
        <td class="val"><input name="confirm" id="confirm" class="text" type="password" test="(none:confirm),(passConfirm:confirm,password)" onFocus="warning(this)" onBlur="detect(this,'ok')" /><span id="confirm_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name">多选：</td>
        <td class="val">
            <input type="checkbox" name="name" test="(multiple:name,1,2,多选不能为空,多选最多只能选择二项)" /><label for="name">name</label>
            <input type="checkbox" name="name" test="(multiple:name,1,2,多选不能为空,多选最多只能选择二项)" /><label for="name">name</label>
            <input type="checkbox" name="name" test="(multiple:name,1,2,多选不能为空,多选最多只能选择二项)" /><label for="name">name</label>        
            <span id="name_msg">多选只能选1~2项</span>
        </td>
      </tr>
      <tr>
        <td class="name">单选：</td>
        <td class="val">
			<input type="radio" name="name2" value="radio1" test="(single:name2,单选不能为空)" /><label for="name2">单选1</label>
			<input type="radio" name="name2" value="radio2" test="(single:name2,单选不能为空)" /><label for="name2">单选2</label>
            <span id="name2_msg">&nbsp;</span>
        </td>
      </tr>
      <tr>
        <td class="name">文件上传：</td>
        <td class="val"><input type="file" name="file" id="file" test="(none:file)"><span id="file_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name">下拉菜单：</td>
        <td class="val">
            <select name="sel" id="sel" test="(none:sel,请选择)">
            <option>请选择</option>
            <option value="123">123</option>
            <option value="456">456</option>
            </select>
			<span id="sel_msg">&nbsp;</span></td>
      </tr>
      <tr>
        <td class="name"></td>
        <td class="val"><input name="submit" class="submit_btn" type="submit"></td>
      </tr>
    </table>
</form>
</body>
</html>